import React, { Component } from 'react';
import {
  Icon,
  Menu,
  Layout,
  Avatar,
  Divider,
  Tooltip,
  Button,
  message,
  Spin,
} from 'antd';
import { ClickParam } from 'antd/lib/menu';
import { observer } from 'mobx-react';
import homeStore from './store';
import HomeTable from './componment/table-componment';
import HomeFromWrapper, { HomeFrom } from './componment/from-compinment';
import { FileRequest } from '../model/file-request';
import PublishApi, { ShareUrl } from '../manger/net-api';
import copy from 'copy-to-clipboard';

const QRCode = require('qrcode.react');
const { SubMenu } = Menu;
const { Header, Content, Footer } = Layout;

@observer
export default class Home extends Component {
  store = homeStore;
  homeFrom?: HomeFrom;
  handleClick = (e: ClickParam) => {
    switch (e.key) {
      case '1':
        this.store.setType(1, 1);
        break;
      case '2':
        this.store.setType(1, 2);
        break;
      case '3':
        this.store.setType(2, 1);
        break;
      default:
        this.store.setType(2, 2);
        break;
    }

    // this.store.getAppList()
  };

  componentDidMount() {
    window.onresize = () => {
      this.store.setWindowHeight(window.innerHeight);
      this.store.setWindowWidth(window.innerWidth);
    };
    this.store.getAppList();
  }

  _submitConfirm = () => {
    this.homeFrom?.props.form.validateFields((err, values) => {
      if (!values.build || !values.desc || !values.version) {
        // alert('请检查参数')
        message.error('请检查参数');
        return;
      }
      if (values.file.file.response.code != 0) {
        // alert('请检查文件是否上传成功')
        message.error('请检查文件是否上传成功');
        return;
      }

      let params: FileRequest = values;
      params.fileId = values.file.file.response.data.id;
      params.name = params.appType == 0 ? '井行学车' : '井行教练';
      params.appType = this.store.appType;
      params.systemType = this.store.systemType;

      this.store.submitApp(params);
    });
  };

  _saveHomeRef = (from: any) => {
    if (from) {
      this.homeFrom = from;
    }
  };

  _renderSlider() {
    return (
      <Menu
        onClick={this.handleClick}
        style={{ width: 256, minHeight: homeStore.windowHeight }}
        defaultSelectedKeys={['sub2', '1']}
        defaultOpenKeys={['sub1', 'sub2', 'sub3']}
        mode="inline"
        inlineCollapsed={false}
      >
        <SubMenu
          key="sub1"
          title={
            <span>
              <Icon type="home" />
              <span>井行</span>
            </span>
          }
        >
          <SubMenu key="sub2" title="Android">
            <Menu.Item key="1">井行学车</Menu.Item>
            <Menu.Item key="2">井行教练</Menu.Item>
          </SubMenu>

          <SubMenu key="sub3" title="iOS">
            <Menu.Item key="3">井行学车</Menu.Item>
            <Menu.Item key="4">井行教练</Menu.Item>
          </SubMenu>
        </SubMenu>
      </Menu>
    );
  }

  _renderHeader() {
    return (
      <div style={{ flex: 1 }}>
        <Header
          style={{
            backgroundColor: 'white',
            margin: 15,
            padding: 1,
            height: 300,
          }}
        >
          {this.store.noData
            ? this._renderEmptyContent()
            : this._renderHeaderContent()}
        </Header>
        <Content style={{ margin: 15 }}>
          <Header style={{ backgroundColor: 'white', padding: 0 }}>
            <span style={{ fontSize: 16, fontWeight: 500, padding: 15 }}>
              版本信息
            </span>
          </Header>
          <HomeTable dataSourceList={this.store.dataSourceList} />
        </Content>
      </div>
    );
  }

  _renderEmptyContent() {
    return (
      <div style={{}}>
        <Content
          style={{
            display: 'flex',
            justifyContent: 'center',
            alignItems: 'center',
            height: 300,
          }}
        >
          <span style={{ marginLeft: -40 }}>暂无应用，请上传</span>
          <Button
            style={{ marginLeft: 10 }}
            onClick={() => this.store.setModalVisible(true)}
            type="primary"
          >
            上传
          </Button>
        </Content>
      </div>
    );
  }
  _renderHeaderContent() {
    let packageName =
      this.store.systemType == 1 ? 'Package ID:***' : 'Bundle ID:';
    let installUrl = ShareUrl + '/?type=' + this.store.appType; //PublishApi.installH5 + "/" + this.store.appType;
    return (
      <Content>
        <div
          style={{ fontSize: 16, fontWeight: 500, paddingLeft: 15, height: 60 }}
        >
          应用概述
        </div>
        <Content
          style={{
            display: 'flex',
            flexDirection: 'row',
            alignItems: 'center',
            padding: 15,
            border: '1px #e8e8e8 solid',
            height: 140,
          }}
        >
          <Avatar shape="square" size={80} icon="android" />
          <div
            style={{
              display: 'flex',
              flexDirection: 'column',
              justifyContent: 'space-between',
              marginLeft: 40,
              lineHeight: 1,
              height: 80,
            }}
          >
            <div style={{ fontSize: 15, fontWeight: 400 }}>
              {this.store.appType == 1 ? '井行教练' : '井行教练'}
            </div>
            <span
              style={{
                display: 'flex',
                alignItems: 'center',
                color: '#9e9e9e',
                height: 30,
                marginTop: 15,
              }}
            >
              <span>
                <Icon style={{ height: 20 }} type={'android'} />
                <span style={{ marginLeft: 5, fontSize: 13, fontWeight: 300 }}>
                  {this.store.systemType == 1 ? 'Android版本' : 'iOS版本'}
                </span>
              </span>
              <span style={{ marginLeft: 25 }}>
                <Icon style={{ height: 20 }} type={'mobile'} />
                <span style={{ marginLeft: 5, fontSize: 13, fontWeight: 300 }}>
                  测试环境
                </span>
              </span>
            </span>
            <div style={{ color: '#9e9e9e' }}>{packageName}</div>
          </div>
        </Content>
        <Footer
          style={{
            display: 'flex',
            flexDirection: 'row',
            alignItems: 'center',
            justifyContent: 'space-between',
            height: 100,
            backgroundColor: 'white',
            padding: 15,
            lineHeight: 1,
          }}
        >
          <span
            style={{
              display: 'flex',
              flexDirection: 'row',
              flex: 1,
              alignItems: 'center',
              zIndex: 10,
            }}
          >
            <span
              style={{
                display: 'flex',
                flexDirection: 'column',
                justifyContent: 'center',
                alignItems: 'center',
                fontSize: 12,
                color: '#9e9e9e',
              }}
            >
              <span>下载二维码</span>
              <span
                style={{
                  marginTop: 5,
                  fontSize: 9,
                  color: 'gray',
                  fontWeight: 500,
                }}
              >
                点击放大
              </span>
            </span>

            <div
              onMouseMove={v => {
                this.store.setQrImgWidth(200);
              }}
              onMouseLeave={() => {
                this.store.setQrImgWidth(80);
              }}
              style={{
                height: this.store.qrImgWidth,
                width: this.store.qrImgWidth,
                marginLeft: 15,
                padding: 5,
                border: '1px #e8e8e8 solid',
                borderRadius: 3,
                backgroundColor: '#f3f3f3',
              }}
            >
              <QRCode value={installUrl} size={this.store.qrImgWidth - 12} />
            </div>

            <Button
              style={{ marginLeft: 25 }}
              onClick={() => this.store.setModalVisible(true)}
              type="primary"
            >
              上传
            </Button>
          </span>
          <Divider type={'vertical'} style={{ height: 60, width: 0.5 }} />
          <div
            style={{
              display: 'flex',
              flex: 1,
              flexDirection: 'column',
              justifyContent: 'center',
              marginLeft: 15,
            }}
          >
            <span style={{ color: '#9e9e9e', fontSize: 12 }}>下载地址</span>
            <span
              style={{
                marginTop: 5,
                fontSize: 9,
                color: 'gray',
                fontWeight: 500,
              }}
            >
              {installUrl}
              <Tooltip title={'复制'}>
                <Icon
                  style={{ marginLeft: 5 }}
                  onClick={() => {
                    copy(installUrl);
                    message.success('复制成功');
                  }}
                  type={'copy'}
                />
              </Tooltip>
            </span>
          </div>
        </Footer>
      </Content>
    );
  }

  render() {
    // let dataSourceList = this.store.dataSourceList;
    return (
      <Spin size={'large'} spinning={this.store.isLoading}>
        <div
          style={{
            display: 'flex',
            flexDirection: 'row',
            flex: 1,
            backgroundColor: '#EEEEEE',
          }}
        >
          {this._renderSlider()}
          {this._renderHeader()}
          <HomeFromWrapper
            onCancel={() => {
              this.store.setModalVisible(false);
            }}
            systemType={this.store.systemType}
            appType={this.store.appType}
            wrappedComponentRef={this._saveHomeRef.bind(this)}
            visible={this.store.modalVisible}
            loadingStatus={this.store.loadingStatus}
            onSubmit={this._submitConfirm.bind(this)}
          />
        </div>
      </Spin>
    );
  }
}
